<template>

    <el-tabs class="moduletabs"
             v-model="sActiveTab">
        <el-tab-pane name="normal">
            <div slot="label"
                 class="moduletabs-i">撑满的表格</div>
            <div class="panel _body">
                <el-table :data="tableData"
                          ref="table_normal"
                          stripe>
                    <el-table-column prop="date"
                                     label="日期">
                    </el-table-column>
                    <el-table-column prop="name"
                                     label="姓名">
                    </el-table-column>
                </el-table>
            </div>
        </el-tab-pane>

        <el-tab-pane name="table">
            <div slot="label"
                 class="moduletabs-i">表格不含滚动条</div>
            <div class="panel _body">
                <el-table :data="tableData"
                          ref="table_table"
                          stripe>
                    <el-table-column prop="date"
                                     label="日期">
                    </el-table-column>
                    <el-table-column prop="name"
                                     label="姓名">
                    </el-table-column>
                </el-table>
            </div>
        </el-tab-pane>

        <el-tab-pane name="tableScroll">
            <div slot="label"
                 class="moduletabs-i">表格包含滚动条</div>
            <div class="panel _body">
                <el-table :data="tableData"
                          ref="table_tableScroll"
                          stripe>
                    <el-table-column prop="date"
                                     label="日期"
                                     fixed="left"
                                     width="180">
                    </el-table-column>
                    <el-table-column prop="name"
                                     label="姓名"
                                     fixed="left"
                                     width="180">
                    </el-table-column>
                    <el-table-column prop="address"
                                     label="地址"
                                     width="400">
                    </el-table-column>
                    <el-table-column prop="address"
                                     label="地址"
                                     width="400">
                    </el-table-column>
                    <el-table-column prop="address"
                                     label="地址"
                                     width="400">
                    </el-table-column>
                </el-table>
            </div>
        </el-tab-pane>
    </el-tabs>

</template>

<script>
    export default {
        data() {
            return {
                sActiveTab: 'table',
                tableData: [{
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-08',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-06',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-07',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }]
            }
        },
        watch: {
            sActiveTab(sNewName) {
                this.$nextTick(() => {
                    this.$refs['table_' + sNewName].doLayout();
                });
            }
        },
    }
</script>